.navigation-bar-item {
  width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;

  &.is-selected {
    .button {
      color: $blue;
    }

    svg[class^='icon-'] {
      fill: $blue;
    }
  }

  .button-borderless:active {
    color: darken($blue, 20%);
  }
}

.navigation-bar-item__icon {
  display: inline-block;
  margin-right: .5em;
  vertical-align: middle;

  svg {
    vertical-align: middle;
    position: relative;
    top: -.2em;
  }
}
